const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
const ElementPlus = require('unplugin-element-plus/webpack')

const path = require('path')

function resolve(dir) {
    return path.join(__dirname, dir)
}

module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave: true,
    // 全局css
    css: {
        extract: false,
        sourceMap: true, // 开启 CSS source maps?
        loaderOptions: {
            less: {
                javascriptEnabled: true
            },
            scss: {
                additionalData: `@use "@/styles/element/index.scss";`
                // additionalData: `@import "@/styles/globalVar.scss";`
            }
        }
    },
    // svg
    chainWebpack: (config) => {
        // 配置 svg-sprite-loader
        // 第一步：让其他svg loader不要对src/icons进行操作
        config.module
            .rule('svg')
            .exclude.add(resolve('src/assets/icon')) // 注意：路径要具体到存放的svg的路径下，不然会报错
            .end() // 第二步：使用svg-sprite-loader 对 src/icons下的svg进行操作
        config.module
            .rule('icons')
            .test(/\.svg$/)
            .include.add(resolve('src/assets/icon')) // 注意：路径要具体到存放的svg的路径下，不然会报错
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            })
            .end()
    },
    configureWebpack: {
        resolve: {
            alias: {
                Components: '@/components',
                src: '@/src'
            }
        },
        plugins: [
            AutoImport({
                imports: ['vue', 'vue-router'],
                resolvers: [ElementPlusResolver()],
                eslintrc: {
                    enabled: true
                }
            }),
            Components({
                resolvers: [ElementPlusResolver()]
            }),
            ElementPlus({
                useSource: true
            })
        ]
    },
    // 本地运行配置，以及反向代理配置
    devServer: {
        // http2: true,
        port: 8090,
        proxy: {
            '/api': {
                target: 'http://localhost:3000',
                // target: 'https://bot.sms-uat.gree.com',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '/api' // 用'/api'代替target里面的地址,比如我要调用'http://40.00.100.100:3002/user/add'，直接写'/api/user/add'即可
                }
            }
        }
    }
})
